iT邦幫忙

2021 iThome 鐵人賽

DAY 1
2

Hi Da Gei Ho~ 初次見面,我是Winnie~

我是一位剛轉職六個月的菜鳥前端(前身是網頁設計師),如果對於我的轉職的過程有一絲好奇的朋友的可以看看 這篇文章 在23歲的結尾,我實現想了很久的事 (文長..)

按照慣例 第一篇文章我也想先來跟大家說說為什麼選這個主題 及 預計會撰寫的大綱內容吧 ~

今年,自己從網頁設計師轉職成前端工程師,由於是非本科生也無相關經驗,所以前端各種技術對於我來說就像黑洞一樣深啊。而我決定以黑洞計畫就是為主軸意象,希望未來可以延伸出各種技術的系列文章。

為什麼會選 Vite + Vue Composition API ?

應該是因為主管推坑吧XD

雖然上面也是部分原因啦XDD,但主要原因還是因為 Vue3 Composition API 是自己轉職後第一個深入接觸的技術,而開發的過程中碰到的坑實在多到數不清,也因為這樣累積了許多零散的筆記,有點不完整,所以希望透過這次 IT鐵人賽的機會 重新整理 及 檢視自己 對於 Vue3 Composition API 到底了解了多少。(我評估目前理解程度應該是55%吧)

另外~ 關於Vite 我真的是 『不用不知道,一用還真是嚇一跳啊』,開發體驗真的快到讓我以為我坐上了什麼北極特快車,開發體驗實在太快了,所以我也想透過這次機會 深入了解 Vite 這麼快的背後是使用了什麼技術,是怎麼實現的。

畢竟如果只會使用工具,卻不知道為什麼這麼用的時候,我覺得蠻令人害怕的啊~

主要大綱內容

前面說了這麼多,接著就來說說預計會有的大綱內容吧,目前分為四大部分,分別是以下:

- 微談 模組化 及 現有開發工具 微歷史篇

此部分主要會介紹 模組化 演化過程 及 現有開發工具 如何進行編譯的,讓我們在進入 Vite 前,可以更了解 為何我們開發需要 工具來編譯。

- Vite 核心背後 篇

接著是Vite 核心篇,如果前面有理解 現有開發工具編譯方式 後, 接著我們可以來了解 Vite 是如何運用 原生 ESM 達成 快速編譯的,而除了 原生 ESM ,Vite HMR 究竟還使用了哪些技術,都會在此部分作介紹。

- 實際操作 Vite 篇

到這邊,Vite最深奧的部份已經結束了,接著這部份我們預計會實際示範 Vite的各種功能,體會看看他到底多香,同時也推薦一些目前自己使用的一些Vite套件,在開發速度上可以達到前所未有的體驗。

- Vue Options API 與 Composition API 篇

此部分主要會討論 Composition API 的好處 ,而 Vue Options API 主要會碰到什麼問題, 而Composition API 可以解決什麼問題。對比兩著之間的差異。

- Vue3 Composition API 核心篇

最後一部分,因為 Composition API 與 Options API 使用方式不盡相同,沒有了this、 data、 method 等方法 要怎麼在composition API撰寫呢 ? 所以此部分主要會介紹 新增的方法 如何使用。

今天就先到這了,謝謝願意花時間看此篇文章的你,如果文章有錯誤的地方,再麻煩不吝嗇的給予指教 謝謝 。


下一篇
Day_02: 讓 Vite 來開啟你的Vue 微談模組化與演進(上)
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
金金
iT邦新手 1 級 ‧ 2021-09-13 14:19:13

vite 讚讚,推一個!

0
ShawnL
iT邦新手 1 級 ‧ 2021-09-14 09:31:16

賀開賽~

0

我要留言

立即登入留言